$(function() {
  var $tbody = $("tbody");
  var pageSize = 5;
  var currentPage = 1;
  /**
   * 渲染数据的函数
   */
  function render() {
    $.ajax({
      url: "/user/queryUser",
      data: {
        pageSize,
        page: currentPage
      },
      dataType: "json",
      success: function(res) {
        $tbody.html(template("tmp", res));
        console.log(res);
        // 初始化分页插件
        page(res.total)
      }
    });
  }
  render();

  // 按钮启用禁用
  $tbody.on("click", ".btn-modal", function() {
    var id = null;
    var isDelete = null;
    // 获取id
    id = $(this)
      .parent()
      .data("id");
    // 注意
    if ($(this).hasClass("btn-danger")) {
      isDelete = 0;
    } else {
      isDelete = 1;
    }
    $(".btn-ok").click(function() {
      $.ajax({
        type: "POST",
        url: "/user/updateUser",
        data: {
          id: id,
          isDelete: isDelete
        },
        dataType: "json",
        success: function(res) {
          $("#myModal").modal('hide');
          render();
        }
      });
    });
  });

  // 分页
  // 利用函数
  // 形成闭包，获取数据 方便初始化
  // 方便代码复用
  function page(total) {
    // 只要在页面中初始化一次，里面的代码就可以执行了
    // 函数调用只是多次初始化，没有意义，只要初始化一次就行了
    // 要清楚调用函数的目的
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      size: "normal", //设置控件的大小，mini, small, normal,large
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        console.log(page);
        currentPage = page;
        // 页面重新渲染
        render();
      }
    });
  }
});
